<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API 测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; }
        #result { margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 3px; white-space: pre-wrap; }
        input { width: 100%; padding: 8px; margin: 5px 0; }
    </style>
</head>
<body>
    <h1>Fetch Moonshot API 测试</h1>
    
    <div class="test-section">
        <h3>测试 Moonshot API</h3>
        <input type="text" id="testMessage" placeholder="输入测试消息" value="你好，请介绍一下你自己">
        <button onclick="testMoonshotAPI()">发送测试消息</button>
        <div id="result"></div>
    </div>

    <script>
        async function testMoonshotAPI() {
            const result = document.getElementById('result');
            const message = document.getElementById('testMessage').value;
            
            result.innerHTML = '🔄 正在发送请求...';
            
            try {
                const response = await fetch('https://api.moonshot.cn/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Authorization': 'Bearer sk-UZr1pGehZlVSBzEb65JyBdLVR5YYahr4DaAohDGUUYAQwTxI',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        model: 'moonshot-v1-8k',
                        messages: [
                            {
                                role: 'system',
                                content: '你是一个专业的医疗智能客服助手，专门帮助用户解答关于医院服务、挂号、缴费、报告查询等问题。请用友好、专业的语气回答用户的问题。'
                            },
                            {
                                role: 'user',
                                content: message
                            }
                        ],
                        temperature: 0.7,
                        max_tokens: 1000,
                    }),
                });

                console.log('响应状态:', response.status);
                console.log('响应头:', response.headers);

                if (!response.ok) {
                    throw new Error(`API请求失败: ${response.status} ${response.statusText}`);
                }

                const data = await response.json();
                console.log('响应数据:', data);

                const aiContent = data.choices?.[0]?.message?.content || '无回复';
                const usage = data.usage || {};

                result.innerHTML = `<div class="success">
✅ API 请求成功！

🤖 AI 回复：
${aiContent}

📊 Token 使用情况：
- 输入 Token: ${usage.prompt_tokens || 0}
- 输出 Token: ${usage.completion_tokens || 0}
- 总计 Token: ${usage.total_tokens || 0}
</div>`;

            } catch (error) {
                console.error('请求失败:', error);
                result.innerHTML = `<div class="error">
❌ 请求失败: ${error.message}

可能的原因：
1. 网络连接问题
2. API 密钥无效
3. CORS 跨域问题（这是正常的，因为直接调用外部 API）
4. API 服务暂时不可用
</div>`;
            }
        }

        // 页面加载时显示说明
        window.onload = function() {
            document.getElementById('result').innerHTML = `
📝 使用说明：
1. 在输入框中输入要测试的消息
2. 点击"发送测试消息"按钮
3. 查看 AI 的回复和 Token 使用情况

⚠️ 注意：由于浏览器的 CORS 策略，直接调用外部 API 可能会失败，这是正常现象。
在实际应用中，应该通过后端代理来调用 API。
            `;
        };
    </script>
</body>
</html>
